import React, { useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import "./SingleRole.css";
import detailData from "../../assets/data/detailData";
import aboutPageData from "../../pages/About/aboutData";
import close from "../../assets/img/close.png";

function SingleRole(props = {}) {
  const { data = [] } = props;
  let navigate = useNavigate();
  const { search = "" } = useLocation();
  const pageThreeData = aboutPageData().pageThree;
  const searchId = search.split("=")[1];
  const { detailList, color, barMargin, bgColor } = detailData().SingleRole;
  const [total, setTotal] = useState(0);
  function pathSwitch(path = `/`) {
    navigate(path);
  }

  return (
    <div className="page-detail-info" style={{ backgroundColor: bgColor }}>
      <div style={{ marginTop: "40px", zIndex: 3, position: "relative" }}>
        <div className="cloud cloud-l page-cloud-l"></div>
        <div className="cloud cloud-m page-cloud-about-m"></div>
        <div className="cloud cloud-r page-cloud-about-r"></div>
        <img
          alt=""
          className="left-ban"
          style={{ position: "fixed", top: "310px", width: "200px" }}
          src={"https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/egg.png"}
        ></img>
        <img
          alt=""
          style={{
            position: "absolute",
            top: "46px",
            width: "200px",
            right: "32%",
          }}
          src={"https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/single.png"}
        ></img>
        <div style={{ display: "flex", width: "50%", margin: "auto" }}>
          <div style={{ margin: "200px 20px 0", wordBreak: "break-all" }}>
            <div className="page-item">
              <a name={"0"}></a>
              <h2 className="page-item-title" style={{ color: color }}>
                {detailList[0].title}
              </h2>
              <img
                alt=""
                className="page-item-banner"
                src={
                  "https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/relation/s_banner1.png"
                }
              ></img>
              <p class="page-item-info">
                <div class="page-item-sub-title">
                  我們在生孩子前，可以問自己哪些問題？
                </div>
                2020 年二月到三月間，女人迷做了年度女性影響力調查報告，共搜集了
                900
                份有效問卷回收。其中回家吧關注到那些家庭中的母親們。我們發現，有孩子的女性，最苦惱於再也沒有屬於自己的時間，或總覺得自己做得不夠好；另外，也有超過九成女性期待伴侶可以共同承擔親職責任。而沒有小孩的人，則較常煩惱包含不知道如何同時承擔原生家庭與自己家庭的照顧責任。
              </p>
              <p className="page-item-info">
                不論是對人生規劃的影響、對自我表現的擔心、對伴侶的期待，或與原生家庭的關係，想要擁有一個孩子，我們方方面面，需要考慮的事情很多。而回家吧繼續透過過去專訪素材、親友經驗分享，以及《Huffpost》、《Yourtango》上的討論，一起聊聊，生孩子前我們思考的幾件事。
              </p>
              <p class="page-item-info">
                <div class="page-item-sub-title">
                  如果需要付出那麼多，為什麼我還是想生一個孩子
                </div>
                看到這你可能會想問，既然擁有一個孩子，我們會需要考慮那麼多條件，也需要有很多的付出，那為什麼人們還是渴望當一個母親呢？這之中可能包含了我們對於一個新身份的期待，以及更深層的，我們意識到這能讓我們體驗擁有一個家的感覺。
              </p>
              <p className="page-item-info">
                《Huffpost》上一名母親就自己的親身經歷分享到，生孩子的體驗，包含了你與原生家庭的再一次彼此理解。譬如他在帶孩子回到父母的家時發現，當看見爸媽疼愛孫子時，他也能感受到愛和療癒。除此之外，你會在教養孩子長大的過程，發現自己需要時時刻刻地面對自己的童年；你可能會意識到自己不想重複過去父母對待自己的方式，你可能正在透過建立一個自己的家，去修復曾經失落的情感。
                <br></br>
                而回家吧過去在進行人物專訪時，我們也訪問了不少母親們的家庭經驗，並且有相似的答案。譬如理科太太曾經分享到，他的母親對孫子的疼愛超乎他的想像：
              </p>
              <p className="page-item-info">
                「我媽最近會做一些很瘋狂的事，她會對我兒子講故事，那是我小時候從來沒有聽過的東西。譬如很生動地跟我兒子說，天花板有小老鼠，你要喝牛奶，小老鼠才會過來找你。我在旁邊聽到也很傻眼，她以前從來不會這樣子的啊！」
              </p>
              <p className="page-item-info">
                隨著現在生活壓力的增加，許多年輕夫妻在生育孩子的問題上都是慎重考慮，因為考慮到生育成本以及孩子需要什麼季節出生，在產婦和孩子會比較適合的天氣裡，所以生育一個孩子並
                不像老一輩的人想的那麼簡單，在沒有任何考慮的情況下就直接生了，而且夏天和冬天相對於女性坐月子和護理寶寶來說也是比較不合適的，夏天太熱，冬天
                太冷，這兩個季節的孩子出生率也會相對較少。
              </p>
              <p className="page-item-info">
                相對於老一輩人口裡的良辰吉日，在年輕人的眼裡，是要天時地利人和的狀態下生孩子。
              </p>
              <p className="page-item-info">
                很多人都會實現計劃好自己孩子出生的季節，以及在自己家庭經濟比較穩定的時候考慮生孩子，這樣在家庭成員多了一個之後，不會因為經濟負擔帶給自己精神上的負擔。
              </p>
              <div
                style={{
                  borderBottom: `2px dashed ${color} `,
                  margin: "40px 0",
                }}
              ></div>
              <p className="page-item-info">
                那麼，生孩子之前需要考慮哪些因素呢？
              </p>
              <p className="page-item-info">
                <div className="page-item-sub">
                  <span
                    style={{
                      color: color,
                      fontSize: "24px",
                      marginRight: "6px",
                    }}
                  >
                    1
                  </span>
                  首先建議夫妻雙方盡量都選擇在最佳的生育年齡裡
                </div>
                這時候父母雙方的精力以及身體狀況都會相對比較好些，這樣對於生育寶寶的硬體條件就沒有擔憂，而且這個時期身體的免疫力各方面也比較好，如果結婚已經超過最佳生育年紀了，那麼考慮
                要孩子的情況下建議夫妻雙方先去做個孕前檢查。
              </p>
              <p className="page-item-info">
                <div className="page-item-sub">
                  <span
                    style={{
                      color: color,
                      fontSize: "24px",
                      marginRight: "6px",
                    }}
                  >
                    2
                  </span>
                  在夫妻雙方經濟穩定的情況下，考慮生孩子
                </div>
                一旦要生孩子，生孩子的成本，以及帶孩子的問題等，物質條件是否具備孕育寶寶所需的各項費用，有許多寶媽寶爸在決定要孩子的那一刻可能需要把這些盤算清楚。
              </p>
              <p className="page-item-info">
                如果是考慮自己帶孩子，那麼一方可能需要失業在家帶孩子，這些都是生育孩子需要考慮的條件，畢竟經濟基礎決定一切，如果在雙方還未穩定的情況下，考慮要孩子可能需要根據實際情況
                。
              </p>
              <p className="page-item-info">
                <div className="page-item-sub">
                  <span
                    style={{
                      color: color,
                      fontSize: "24px",
                      marginRight: "6px",
                    }}
                  >
                    3
                  </span>
                  媽媽是否做好了成為媽媽的心理準備
                </div>
                如果還沒準備成為媽媽的情況下，一旦突然有了孩子，媽媽在孕期的整個狀態或者在產後的整個狀態都沒辦法適應和應對的情況下，那麼產後抑鬱的可能性就會比較高，會
                對這些繁瑣的生活無從是從，而且可能還要面對黑白顛倒的生活，當然，如果做好心理準備的媽媽，這些都是他們積極要去面對的，所以整個心態和狀態都會相對好些。
              </p>
              <p className="page-item-info">
                <div className="page-item-sub">
                  <span
                    style={{
                      color: color,
                      fontSize: "24px",
                      marginRight: "6px",
                    }}
                  >
                    4
                  </span>
                  生完寶寶後是否有人帶寶寶
                </div>
                懷孕期間是每個準媽媽需要認真對待的一段過程，在準媽媽成功卸貨後，一個個問題又擺在了準爸爸和準媽媽面前，比如如果準爸爸忙於工作，誰來侍候準媽媽的月子？
                如果花錢僱月子中心照顧，花費和品質是準爸爸與準媽媽不得不思考的問題。
                如果女方的爸爸媽媽和公公婆婆都有大把時間，那麼侍候準媽媽的月子將省去不少顧慮。
                當然在準媽媽成功卸貨後，由誰來侍候月子，是許多準爸爸與準媽媽決定要寶寶之前就不得不認真考慮的問題。
              </p>
              <p className="page-item-info">
                <div className="page-item-sub">
                  <span
                    style={{
                      color: color,
                      fontSize: "24px",
                      marginRight: "6px",
                    }}
                  >
                    5
                  </span>
                  物質條件是否具備孕育寶寶所需的各項費用
                </div>
                有許多寶媽寶爸在決定要孩子的那一刻，都會在心裡默默盤算著給寶寶最好的生活條件，物質條件是否具備要寶寶也是很多夫妻要考慮的因素。
                因為不只在準媽媽在家待產時需要一筆開銷，寶寶出生後的奶粉錢同樣花銷不菲。
                為了讓寶寶不輸在起跑線上，是否真正具備要寶寶的物質條件，真是每個寶爸寶媽都無法迴避，很現實的一個問題。
              </p>
              <p className="page-item-info">
                所以寶爸寶媽們是不是在考慮生孩子的時候，對這些問題進行一一的疏導和商量呢，畢竟家庭成員是多了一個，所有的東西都得為這個即將到來的小傢伙讓步，所以
                需要慎重考慮之後，要個健康的寶寶以及當個快樂的媽媽是非常重要的。
              </p>
              <div
                style={{
                  borderBottom: `2px dashed ${color} `,
                  margin: "40px 0",
                }}
              ></div>
              <p class="page-item-info">
                <div class="page-item-sub-title">
                  生小孩之前可以思考哪些點？
                </div>
                小梅說：「若深思熟慮不想生小孩，也不用對任何人解釋。」但若想把小孩放進人生規劃裡，可以思考的部分分為外在及內在。
              </p>
              <div className="page-three-pop single-page-three-pop">
                {pageThreeData.map((e, i) => {
                  const { title, value } = e;
                  return (
                    <div className="page-three-item single-page-three-item">
                      <div className="page-three-item-title">{title}</div>
                      <div className="page-three-item-value">{value}</div>
                      <span className="pop"></span>
                    </div>
                  );
                })}
              </div>
              <p class="page-item-info">
                身為過來人，小梅分享：「這些思考是思考，並不是讓你覺得自己已經準備好了，而是讓你去作一些心理狀態的準備，事情發生了才不會太過慌亂。」
              </p>
            </div>
            <div className="page-item">
              <a name={"1"}></a>
              <h2 className="page-item-title" style={{ color: color }}>
                {detailList[1].title}
              </h2>
              <img
                alt=""
                className="page-item-banner"
                src={
                  "https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/relation/s_banner2.png"
                }
              ></img>
              <p className="page-item-info">
                {" "}
                近年愈來愈多名媛女星向傳媒透露已進行雪卵手術，可見除健康問題，現時不少女性都因為事業或晚婚等原因而進行卵子冷凍。醫學科技日新月異，卵子冷凍早已非奇聞，但網上對於卵子冷凍的細節及資料良莠不齊。本文請來香港註冊生殖醫學專科醫生梁家康醫生，簡述冷凍卵子及人工受孕的程序及注意事項，並分享他在行醫生涯中的特別個案。
              </p>
              <p class="page-item-info">
                <div class="page-item-sub-title">
                  雪卵不宜過早或太遲　30至34歲為最佳
                </div>
                雪卵技術現時已相當成熟，但並非每個人都適合進行冷凍卵子或人工受孕。醫生會先和求診女士進行問診，確認並無性傳染病或其他嚴重疾病。理論上女性由開始來經時已經有卵子產生及可懷孕，但梁醫生認為雪卵的最佳年齡是30至34歲，「有部分女士想趁二十多歲，相對年輕時進行雪卵，以保留卵子在更佳的狀態，但過早雪卵可能會面對不需要用雪卵，或有需要使用卵子時，已超過香港法定的十年儲存期；但推遲至36歲後，則會年紀問題而使卵子數量較少及質素較差，一來可能需要數次取卵手術才能收集足夠數量的卵子，二來胚胎亦有較大機會出現不正常情況。」
              </p>
              <p class="page-item-info">
                <div class="page-item-sub-title">
                  手術前先催卵　目標取卵數量為10-15粒
                </div>
                開始雪卵療程時，女士需注射與人體自身分泌類近的促性腺激素，刺激卵巢製造更多卵泡，確保手術時有足夠數量以供抽取。催卵過程約10天，每隔數天醫生會用超聲波進行觀察卵巢，待卵泡數量及成熟度適合時便會進行手術。整個手術約20至30分鐘，期間女士會接受麻醉，不會感到痛楚。
              </p>
              <p class="page-item-info">
                至於抽取卵子的數量，梁醫生指20至35歲而健康狀況正常的女士，身體每月會可以有20至30粒卵泡，最終排出則只有1粒。激素可以保證小卵泡都會長大成熟。抽卵手術會利用幼針，經過陰道，直接從卵巢抽取10至15粒卵子，處理後便進行冷凍。
              </p>
              <p class="page-item-info">
                <div class="page-item-sub-title">
                  解凍後卵子等於「新鮮」卵子?
                </div>
                卵子冷凍（俗稱雪卵）是將卵子儲存在-196℃的液氮中，以作長時間保存，待日後有需要使用時解凍及進行受精。雪卵技術早於1980年初面世，但當時存活率僅4至6成，直至2000年後出現「玻璃化冷凍」（Vitrification），取代舊式的「慢速冷凍法」（Slow
                Freezing）；以冷凍保護劑使細胞內的水份變得粘稠，再配合快速降溫（即每分鐘下降2,000℃），解決舊式方法因結冰及融冰而影響卵子細胞構造及生存率，為全球冷凍技術帶來突破發展。
              </p>
              <p class="page-item-info">
                梁醫生早於2004年便在香港使用「玻璃化冷凍」雪卵技術，初期只應用在因癌症治療而影響生育的病人身上，後來技術日漸穩定，逐開始廣泛使用。現時經他處理的冷凍卵子存活率高達99％，而受孕率則視乎卵子年齡，大約40-60％。「以現時的技術來說，解凍後的卵子與『新鮮』無異。香港現時的人工受孕技術已達國際標準，一般來說，活產率大約40%，可見雪卵將可為更多女性提供生育選擇。」
              </p>
              <p class="page-item-info">
                <div class="page-item-sub-title">
                  注射激素致水腫　經期重臨便已回復正常?
                </div>
                從打針、卵巢監察至手術，整個過程大約兩星期。梁醫生指出，一般人在手術後都不會感到嚴重痛楚，大部分女士服用止痛藥便可，只有3至5％人士需要打止痛針。「以往手術過程或會傷及血管而導致流血，但隨著超聲波技術的進步，這個問題已得以改善，過去十多年只有少於十個病人，術後出現較嚴重問題而需入院。」至於注射激素所導致的副作用問題，梁醫生表示部分女士或出現短暫水腫情況，但在下次經期重臨已經逐步回復正常，而激素亦不會導致提早收經等情況出現。
              </p>
              <p class="page-item-info">
                <div class="page-item-sub-title">
                  各地法規迴異　在港雪卵合法　唯人工受孕必須為已婚夫婦
                </div>
                由於香港對生殖科技的規管十分嚴謹，例如求診者資料、療程細節、療程結果及受孕情況等均須登記在政府人類生殖科技管理局的檔案內；以保證雪藏的卵子是合法儲存和使用。然而，與人工受孕不同，卵子冷凍並無規定必須已結為合法夫婦才可進行，單身女士亦可做卵子冷凍。梁醫生續指。如有需要女士可選擇將已被雪藏的卵子運往其他國家，但應先了解該地的法律規限。
              </p>
            </div>
          </div>
        </div>
      </div>
      <div className="page-bar">
        {detailList.map((e, i) => {
          const { titleBar, title, id } = e;
          return (
            <div
              style={{
                display: "flex",
                margin: barMargin,
                color: color,
                cursor: "pointer",
              }}
            >
              <div
                style={{
                  minWidth: "10px",
                  background: color,
                  borderRadius: "5px",
                  margin: "0 10px",
                }}
              ></div>
              {/* <div dangerouslySetInnerHTML={{ __html: titleBar }}></div> */}
              <a
                dangerouslySetInnerHTML={{ __html: titleBar }}
                href={"#" + i}
                style={{ color, textDecoration: "none" }}
              ></a>
            </div>
          );
        })}
      </div>
      <div className="page-detail-foot">
        <div className="gradual gradual-single"></div>
        <div className="detail-foot"></div>
        <div className="detail-floor"></div>
      </div>
      <img
        className="page-close cursor-pointer"
        alt=""
        src={close}
        onClick={() => pathSwitch()}
      />
    </div>
  );
}

export default SingleRole;
